<template>
    <view class="page content">
        <comHead :datas="datasObj">
            <template #headerContent>
                <view class="header_box_slot">
                    <view class="menu_box">
                        <view class="menu_box_list flex-center">
                            <view class="tabTwo flex-bwt mt-10">
                                <view class="left flex ml-24">
                                    <view class="item ft" v-for="(item, index) in tab2Array" :key="item"
                                        @click="openShow(item, item.title)">
                                        <text class="mr-8 c-66" :class="{ active: item.active }">{{
                                            item.title
                                        }}</text>
                                        <image class="jiantou" :class="currentIndex == index ? 'imgdeg' : ''"
                                            src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png"></image>
                                        <text class="line"
                                            style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
                                    </view>
                                </view>
                                <view class="right flex mr-24" @click="openShow">
                                    <text class="ft mr-8" :class="isFilter ? 'active' : ''">筛选</text>
                                    <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon16.png">
                                    </image>
                                </view>
                            </view>
                        </view>
                        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
                            <view class="scroll-view-item_A ft flex-center" v-for="(item, index) in tipList"
                                :key="index"
                                :class="filterList[item.key].names?.includes(item.name) ? 'scroll-view-item_A_active' : filterList[item.key].names?.includes(item) ? 'scroll-view-item_A_active' : ''"
                                @click="selectActivity(item)">
                                {{ item.name }}
                            </view>
                        </scroll-view>
                    </view>
                    <!-- 展示类型 -->

                    <view class="qiehuan pd-10 flex ml-20 mt-20" @click="changeShowList()">
                        <text class="ft c-33 mr-8">{{ showListTitle }}</text>
                        <image class="wh-28" v-if="!isShowList"
                            src="https://cdn.oss.bon-top.cn/static_bc/images/icon_mo.png"></image>
                        <image class="wh-28" v-else src="https://cdn.oss.bon-top.cn/static_bc/images/video_icon.png">
                        </image>
                    </view>

                </view>
            </template>
        </comHead>

        <view class="nextCard">

            <!-- 列表 -->
            <view class="pd-20" v-if="dataList.length">
                <ComProjectList v-if="dataList.length > 0 && isShowList" :dataList="dataList" :dataObj="dataListObj"
                    :pageInfo="pageInfo" @getProjectList="getProductListFun">
                </ComProjectList>
            </view>

            <!-- 视频 -->
            <comVedioList v-if="dataList.length > 0 && !isShowList" :dataList="dataList" :dataObj="dataListObj"
                :pageInfo="pageInfo" @getVideoList="getProductListFun"></comVedioList>

            <noData v-else-if="!dataList.length"></noData>
            <view style="height: 100px;"></view>
        </view>


    </view>
    <comFilterPup ref="comFilter" v-if="show" :filterKeys="filterKeys" :datas="filterList" @getFiler="getFiler"
        @closeShow="closeShow" :type="pupTitle">
    </comFilterPup>
</template>

<script setup lang="js">
import { nextTick, onMounted, reactive, ref } from "vue";
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import { onLoad } from "@dcloudio/uni-app";
import comFilterPup from '@/components/comFilterPup.vue'
import comHead from '@/components/comHead.vue'

import ComProjectList from "@/components/comProjectList.vue";
import comVedioList from "@/components/comVedioList.vue";
import noData from "@/components/noData.vue";
let datasObj = reactive({
    title: '精品附加服务',
    img: 'https://cdn.oss.bon-top.cn/static_bc/images/head_bg.png',
    color: `#fff`,
    isColor: true,
    direction: '',
    scrollTop: 0,
    height: 532,
    backisImg: false,//导航文字模块的背景图
    headerisImg: false,//整个huader模块的背景图
    fullImag: false,//header是否显示完整的图片
})
let pageInfo = reactive({
    page: 1,
    pageSize: 10
})
const tab2Array = ref([
    {
        title: "综合推荐",
        key: 'overall_sort',
        array: ["综合推荐", "按点击量", "按播放量"],
    },
    {
        title: "国家",
        key: 'country',
        array: ["美国", "俄国", "法国"]
    },
    {
        title: "价格",
        key: 'price_sort',
        array: ["升序", "降序"]
    },
]);
let filterList = reactive({})
// 列表名称对应传递的参数名称 key:value 列表名:参数名
const selectLabel = {
    'preferential': 'preferential_ids',
    'activity_tag': 'activity_tag_ids',
    'overall_sort': 'orderBy',
    'country': 'country_ids',
    'price_sort': 'orderType',
    'imm_identity_cate': 'imm_identity_cate',
    'imm_handle_cate': 'imm_handle_cate',
    'imm_handle_cycle': 'imm_handle_cycle',
    'imm_approved_time': 'imm_approved_time',
    'imm_live_require': 'imm_live_require',
    'imm_nocrime_require': 'imm_nocrime_require',
}
// 筛选点击确认时触发
let selectObj = reactive({})
const filterLength = ref(0)
const isFilter = ref(false)
const getFiler = (data, leng) => {
    console.log('data 子组件传过来的值', data, leng)
    show.value = false;
    isFilter.value = Number(leng) > 0
    filterLength.value = Number(leng)
    console.log(' Number(leng) > 0', Number(leng) > 0)
    filterList = data
    Object.keys(selectLabel).forEach(f => {
        selectObj[selectLabel[f]] = data[f].ids
        tab2Array.value.forEach(tab => {
            tab.title = data[tab.key].ids.length > 0 ? data[tab.key].names[0] : data[tab.key].name
            tab.active = data[tab.key].ids.length > 0
        })
    })
    console.log('selectObj', selectObj)
    console.log('tab2Array', tab2Array.value)

    closeShow()
    // 请求数据
    getProductListFun()

}
// 列表
let dataList = ref([])
let dataListObj = ref({})
const selectId = ref(0)

const getProductListFun = async () => {
    dataList.value = []
    let obj = {
        cate_name: '附加服务',
        ...pageInfo,
        ...selectObj
    }
    // 视频
    if (isGetVideo.value) obj.getVideo = 1
    await utils.request(
        api.getProductList
        , obj
        ,
        'post').then((res) => {
            if (res.code === 200) {
                nextTick(() => {

                    dataListObj.value = res.data
                    dataListObj.value.listIsShow = dataListObj.value.items.length > 0
                    dataListObj.value.noDataType = 0
                    dataList.value = [...dataList.value, ...res.data.items]
                    console.log('搜索', dataList.value)
                    console.log('dataListObj', dataListObj)
                })

            }
        })
}
// 打开筛选
let filterKeys = reactive([])
const show = ref(false)
const comFilter = ref(null)

const openShow = (data, title) => {
    console.log('data', data)
    if (data.key) {
        filterKeys = [data.key]
    } else {
        // 'preferential', 'activity_tag',
        filterKeys = ['imm_identity_cate', 'imm_handle_cate', 'imm_handle_cycle', 'imm_approved_time', 'imm_live_require', 'imm_nocrime_require']
    }

    show.value = true;
    console.log('comFilter', comFilter.value)
    comFilter.value?.open()

};
// 获取赛选列表数据
let info = reactive([])
const tipList = ref([]);
const getProductFilterData = () => {
    utils.request(api.getProductFilter
        , {

        }, 'get').then((res) => {
            if (res.code === 200) {
                tab2Array.value.forEach(item => {
                    item.array = res.data?.info[item.key]
                })
                console.log('tab2Array', tab2Array)
                let labelObj = {
                    'preferential': '活动优惠标签',
                    'activity_tag': '活动标签',
                    'overall_sort': '综合排序',
                    'country': '洲/国家',
                    'price_sort': '价格排序',
                    'imm_identity_cate': '身份类别',
                    'imm_handle_cate': '办理类别',
                    'imm_handle_cycle': '办理周期',
                    'imm_approved_time': '获批时间',
                    'imm_live_require': '居住要求',
                    'imm_nocrime_require': '无犯罪要求',
                }

                let keys = Object.keys(labelObj)
                let _includes = ['overall_sort', 'price_sort',]
                for (let key of keys) {
                    filterList[key] = {
                        key: key,
                        name: labelObj[key],
                        isRadio: _includes.includes(key) ? true : false,
                        isArr: key.startsWith('imm_') ? true : false,
                        list: res.data?.info[key] || [],
                        ids: [],
                        names: [],
                    }
                    if (key == 'activity_tag' || key == 'preferential') {
                        let arr = res.data.info[key]
                        arr.forEach(f => f.key = key)
                        tipList.value = [...tipList.value, ...arr]


                    }
                }

                console.log('filterList', filterList)
                console.log('tipList', tipList.value)
            }
        })
}

const selectActivity = (item) => {
    if (!filterList[item.key].ids.includes(item.id)) {
        filterList[item.key].ids.push(item.id)
        filterList[item.key].names.push(item.name)
    } else {
        filterList[item.key].ids = filterList[item.key].ids.filter(f => f != item.id)
        filterList[item.key].names = filterList[item.key].names.filter(f => f != item.name)
    }
    console.log('筛选list', filterList)
    getFiler(filterList, filterLength.value)
}
// 默认按列表展示
const isShowList = ref(true)
const showListTitle = ref('按视频查看')
const isGetVideo = ref(false)
const changeShowList = () => {
    isShowList.value = !isShowList.value
    isGetVideo.value = !isShowList.value
    if (isShowList.value) {
        showListTitle.value = '按视频查看'
    } else {
        showListTitle.value = '按列表查看'
    }
    getProductListFun()
}
onLoad(async () => {
    await getProductListFun()
    await getProductFilterData()
})
const closeShow = () => {
    show.value = false;
    console.log('closeShow 被调用了')
}
const goPage = (url) => {
    console.log('哈哈', url)
    uni.navigateTo({ url: url })
}
</script>
<style lang="scss" scoped>
.auto {
    margin: 0 auto;
}

.header_box_slot {
    width: 100%;
    height: 224rpx;
    background: #fff;

    .menu_box {
        // width: 100%;
        // height: 200rpx;
        // position: fixed;
        // background-color: red;
        // z-index: 3;
        // left: 0;
        padding: 0 20rpx;
        box-sizing: border-box;

        .menu_box_list {
            .active {
                color: #333333;
                font-weight: 900;
            }

            // position: relative;
            .tipItemActive {
                color: rgb(250, 92, 35);
            }

            .tipBox_list_model {
                background-color: gold;
                // position: absolute;
                left: 0;
                width: 100%;
                z-index: 3;
                border-radius: 40rpx;



                .tipBox_list {
                    width: 100%;
                    height: 200rpx;
                    // position: absolute;
                    background-color: #fff;
                    top: 0rpx;
                    z-index: 3;
                    border-radius: 40rpx;
                    padding: 20rpx 30rpx 0 30rpx;
                    // margin-top: 10rpx;

                    .tipItem {
                        width: 100%;
                        border-top: 2rpx solid #f1f1f1;
                        padding: 10rpx 0;
                        margin-left: 30rpx;
                        color: #666;
                    }



                    .tipItem:first-child {
                        border: none;

                    }
                }
            }
        }
    }

    .jiantou {
        width: 30rpx;
        height: 18rpx;
    }

    .imgdeg {
        transform: rotate(180deg);
    }

    .tabTwo {
        width: 100%;
        height: 74rpx;
        background: linear-gradient(180deg, #f8f8f8 0%, rgba(248, 248, 248, 0) 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .left {
            .item {

                display: flex;
                align-items: center;

            }

            .item:last-child {
                border: none;
            }
        }
    }

    .scroll-view_H {

        margin-top: 0rpx;
        white-space: nowrap;

    }

    .scroll-view-item_A {
        //border: 2rpx solid green;
        display: inline-block;
        height: 58rpx;
        background: #ffffff;
        border-radius: 34rpx 34rpx 34rpx 34rpx;
        border: 2rpx solid #f1f1f1;
        margin-right: 20rpx;
        line-height: 58rpx;
        text-align: center;
        padding-left: 20rpx;
        padding-right: 20rpx;
        // margin-left: 24rpx;

    }

    .scroll-view-item_A_active {
        margin-left: 24rpx;
        background: #000;
        color: #f1f1f1;
    }

    .qiehuan {
        // border: 2rpx solid red;
        width: 198rpx;
        height: 54rpx;
        background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
        border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

}

.nextCard {
    // width: 700rpx !important;
    width: 100%;
    // background-color: red;
    // position: relative;
    // background-color: red;
    // overflow: hidden;
    box-sizing: border-box;
    // height: calc(100vh - 520rpx);

    .bg {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.1;
        position: absolute;
        top: 120rpx;
        z-index: 2;
        border-radius: 40rpx;

    }






    .cardList {
        .card {

            width: 690rpx;
            height: 408rpx;
            background: #ffffff;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            border: 2rpx solid #f1f1f1;

            .left {
                width: 222rpx;
                height: 274rpx;
                border-radius: 40rpx 40rpx 40rpx 40rpx;
                flex-shrink: 0;
            }

            .right {
                flex: 1;
                height: 274rpx;

                .active {
                    color: #333333;
                    font-weight: 900;
                }


                .top1 {

                    .tip {
                        // width: 88rpx;
                        height: 36rpx;
                        background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
                        border-radius: 8rpx 8rpx 8rpx 8rpx;
                        flex-shrink: 0;
                        padding: 5rpx 8rpx;

                    }

                }

                .domn {
                    .price {
                        width: 148rpx;
                        height: 92rpx;
                        background: linear-gradient(90deg,
                                #fff5f3 0%,
                                rgba(255, 245, 243, 0) 100%);
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                    }

                    .price2 {
                        width: 148rpx;
                        height: 92rpx;
                        background: #fff;
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                        margin-left: 30rpx;

                    }

                }

                .midel {}
            }

            .foot {
                width: 610rpx;
                height: 74rpx;
                background: linear-gradient(92deg,
                        #f8f8f8 0%,
                        rgba(248, 248, 248, 0) 100%);
                border-radius: 40rpx 40rpx 40rpx 40rpx;
            }
        }
    }


}

.vedio {
    .vedioItem {
        width: 334rpx;
        height: 614rpx;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        //border: 1rpx solid red;
        margin-bottom: 16rpx;
        position: relative;

        .bg {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .play {
            position: absolute;
            top: 297rpx;
            left: 147rpx;
            z-index: 3;
        }

        .card {
            width: 314rpx;
            height: 82rpx;
            background: #ffffff;
            border-radius: 44rpx 44rpx 44rpx 44rpx;
            position: absolute;
            bottom: 10rpx;
            left: 10rpx;
            z-index: 10;

            .huiyuan {
                width: 22rpx;
                height: 20rpx;
                position: absolute;
                bottom: 10rpx;
                left: 44rpx;
                z-index: 12;
            }
        }
    }
}
</style>